<template>
  <div class="list-container">
    <h2>利息结算列表</h2>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>金额</th>
          <th>利率</th>
          <th>期限</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 数据循环 -->
        <tr v-for="item in listData" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.amount }}</td>
          <td>{{ item.rate }}%</td>
          <td>{{ item.period }}天</td>
          <td>
            <button @click="viewDetail(item)">查看详情</button>
          </td>
        </tr>
      </tbody>
    </table>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'

// 模拟数据

const viewDetail = (item) => {
  // 查看详情逻辑
  console.log('查看详情:', item)
}

const tableData = ref(
  [
    {
      date: '2016-05-03',
      name: 'To1111m',
      address: 'No. 189, Grove St, Los Angeles',

      date: '2023-01-01', // 放款日期
      remaining: '10000', // 贷款余额
      rate: '3.5', // 利率
      seedMoney: '10000', // 本金
      interestMoney: '350', // 本金
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]
)

onMounted(() => {
  tableData.value.forEach(item => {
    item.interestMoney = (item.remaining * item.rate / 100).toFixed(2)
  })
})


</script>

<style scoped>
/* 样式表 */
</style>